<include file="Common/header" title="Romi博客" keywords="html,css,php" />
	<body>
		<!--header-->
		<include file="Common/top" />
		<!--//header-->
		<!--search-scripts-->
		<script src="__PUBLIC__/home/js/classie.js"></script>
		<script src="__PUBLIC__/home/js/uisearch.js"></script>
		<script>
			new UISearch(document.getElementById('sb-search'));
		</script>
		<!--//search-scripts-->
		<!--banner-->
		<div class="banner">
			<div class="container">
				<div class="banner-top">
					<h1>让我们在知识的海洋的遨游</h1>
					<ul>
						<li><a class="sub" href="#">浏览文章</a>
						</li>
						<li><a class="art" href="#">浏览案例</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!--banner-->
		<!--slide-->
		<div class="gallery-cursual">
			<!-- requried-jsfiles-for owl -->
			<link href="__PUBLIC__/home/css/owl.carousel.css" rel="stylesheet">
			<script>
				$(document).ready(function() {
					$("#owl-demo").owlCarousel({
						items: 5,
						lazyLoad: true,
						autoPlay: true,
						pagination: false,
					});
				});
			</script>
			<!-- //requried-jsfiles-for owl -->
			<!-- start content_slider -->
			<div id="owl-demo" class="owl-carousel text-center">
				<div class="item g1 popup-with-zoom-anim" href="#small-dialog">
					<img class="lazyOwl" data-src="__PUBLIC__/home/images/slide-1.jpg" alt="name">
					<div class="caption">
						<h3>Vanglo House by LWPAC in canada</h3>
						<div class="s-btn">
							<a href="#">READ MORE</a>
						</div>
					</div>
				</div>
				<div class="item g1 popup-with-zoom-anim" href="#small-dialog1">
					<img class="lazyOwl" data-src="__PUBLIC__/home/images/slide-2.jpg" alt="name">
					<div class="caption">
						<h3>Vanglo House by LWPAC in canada</h3>
						<div class="s-btn">
							<a href="#">READ MORE</a>
						</div>
					</div>
				</div>
				<div class="item g1 popup-with-zoom-anim" href="#small-dialog2">
					<img class="lazyOwl" data-src="__PUBLIC__/home/images/slide-3.jpg" alt="name">
					<div class="caption">
						<h3>Vanglo House by LWPAC in canada</h3>
						<div class="s-btn">
							<a href="#">READ MORE</a>
						</div>
					</div>
				</div>
				<div class="item g1 popup-with-zoom-anim" href="#small-dialog3">
					<img class="lazyOwl" data-src="__PUBLIC__/home/images/slide-4.jpg" alt="name">
					<div class="caption">
						<h3>Vanglo House by LWPAC in canada</h3>
						<div class="s-btn">
							<a href="#">READ MORE</a>
						</div>
					</div>
				</div>
				<div class="item g1 popup-with-zoom-anim" href="#small-dialog4">
					<img class="lazyOwl" data-src="__PUBLIC__/home/images/slide-5.jpg" alt="name">
					<div class="caption">
						<h3>Vanglo House by LWPAC in canada</h3>
						<div class="s-btn">
							<a href="#">READ MORE</a>
						</div>
					</div>
				</div>
				<div class="item g1 popup-with-zoom-anim" href="#small-dialog5">
					<img class="lazyOwl" data-src="__PUBLIC__/home/images/slide-6.jpg" alt="name">
					<div class="caption">
						<h3>Vanglo House by LWPAC in canada</h3>
						<div class="s-btn">
							<a href="#">READ MORE</a>
						</div>
					</div>
				</div>
				<div class="item g1 popup-with-zoom-anim" href="#small-dialog6">
					<img class="lazyOwl" data-src="__PUBLIC__/home/images/slide-7.jpg" alt="name">
					<div class="caption">
						<h3>Vanglo House by LWPAC in canada</h3>
						<div class="s-btn">
							<a href="#">READ MORE</a>
						</div>
					</div>
				</div>
				<div class="item g1 popup-with-zoom-anim" href="#small-dialog">
					<img class="lazyOwl" data-src="__PUBLIC__/home/images/slide-1.jpg" alt="name">
					<div class="caption">
						<h3>Vanglo House by LWPAC in canada</h3>
						<div class="s-btn">
							<a href="#">READ MORE</a>
						</div>
					</div>
				</div>
				<div class="item g1 popup-with-zoom-anim" href="#small-dialog">
					<img class="lazyOwl" data-src="__PUBLIC__/home/images/slide-2.jpg" alt="name">
					<div class="caption">
						<h3>Vanglo House by LWPAC in canada</h3>
						<div class="s-btn">
							<a href="#">READ MORE</a>
						</div>
					</div>
				</div>
			</div>
			<!--//sreen-gallery-cursual---->
			<!-- caption-popup -->
			<div class="caption-popup">
				<div id="small-dialog" class="mfp-hide innercontent">
					<h4>Vanglo House by LWPAC in canada</h4>
					<img class="img-responsive cap" src="__PUBLIC__/home/images/slide-1.jpg" title="postname" />
					<p>elit. Etiam sit amet nunc nec magna accumsan ultricies eget a leo. Praesent nec libero aliquet, malesuada nibh et, tincidunt arcu. Aenean porta faucibus nisl. Fusce ultrices nec purus eget consequat. Phasellus pharetra dignissim lacus id rhoncus.
						In malesuada et mi non mollis. </p>
					<a class="morebtn" href="#">ReadMore</a>
				</div>
			</div>
			<div class="caption-popup">
				<div id="small-dialog1" class="mfp-hide innercontent">
					<h4>Vanglo House by LWPAC in canada</h4>
					<img class="img-responsive cap" src="__PUBLIC__/home/images/slide-2.jpg" title="postname" />
					<p>elit. Etiam sit amet nunc nec magna accumsan ultricies eget a leo. Praesent nec libero aliquet, malesuada nibh et, tincidunt arcu. Aenean porta faucibus nisl. Fusce ultrices nec purus eget consequat. Phasellus pharetra dignissim lacus id rhoncus.
						In malesuada et mi non mollis. </p>
					<a class="morebtn" href="#">ReadMore</a>
				</div>
			</div>
			<div class="caption-popup">
				<div id="small-dialog2" class="mfp-hide innercontent">
					<h4>Vanglo House by LWPAC in canada</h4>
					<img class="img-responsive cap" src="__PUBLIC__/home/images/slide-3.jpg" title="postname" />
					<p>elit. Etiam sit amet nunc nec magna accumsan ultricies eget a leo. Praesent nec libero aliquet, malesuada nibh et, tincidunt arcu. Aenean porta faucibus nisl. Fusce ultrices nec purus eget consequat. Phasellus pharetra dignissim lacus id rhoncus.
						In malesuada et mi non mollis. </p>
					<a class="morebtn" href="#">ReadMore</a>
				</div>
			</div>
			<div class="caption-popup">
				<div id="small-dialog3" class="mfp-hide innercontent">
					<h4>Vanglo House by LWPAC in canada</h4>
					<img class="img-responsive cap" src="__PUBLIC__/home/images/slide-4.jpg" title="postname" />
					<p>elit. Etiam sit amet nunc nec magna accumsan ultricies eget a leo. Praesent nec libero aliquet, malesuada nibh et, tincidunt arcu. Aenean porta faucibus nisl. Fusce ultrices nec purus eget consequat. Phasellus pharetra dignissim lacus id rhoncus.
						In malesuada et mi non mollis. </p>
					<a class="morebtn" href="#">ReadMore</a>
				</div>
			</div>
			<div class="caption-popup">
				<div id="small-dialog4" class="mfp-hide innercontent">
					<h4>Vanglo House by LWPAC in canada</h4>
					<img class="img-responsive cap" src="__PUBLIC__/home/images/slide-5.jpg" title="postname" />
					<p>elit. Etiam sit amet nunc nec magna accumsan ultricies eget a leo. Praesent nec libero aliquet, malesuada nibh et, tincidunt arcu. Aenean porta faucibus nisl. Fusce ultrices nec purus eget consequat. Phasellus pharetra dignissim lacus id rhoncus.
						In malesuada et mi non mollis. </p>
					<a class="morebtn" href="#">ReadMore</a>
				</div>
			</div>
			<div class="caption-popup">
				<div id="small-dialog5" class="mfp-hide innercontent">
					<h4>Vanglo House by LWPAC in canada</h4>
					<img class="img-responsive cap" src="__PUBLIC__/home/images/slide-6.jpg" title="postname" />
					<p>elit. Etiam sit amet nunc nec magna accumsan ultricies eget a leo. Praesent nec libero aliquet, malesuada nibh et, tincidunt arcu. Aenean porta faucibus nisl. Fusce ultrices nec purus eget consequat. Phasellus pharetra dignissim lacus id rhoncus.
						In malesuada et mi non mollis. </p>
					<a class="morebtn" href="#">ReadMore</a>
				</div>
			</div>
			<div class="caption-popup">
				<div id="small-dialog6" class="mfp-hide innercontent">
					<h4>Vanglo House by LWPAC in canada</h4>
					<img class="img-responsive cap" src="__PUBLIC__/home/images/slide-7.jpg" title="postname" />
					<p>elit. Etiam sit amet nunc nec magna accumsan ultricies eget a leo. Praesent nec libero aliquet, malesuada nibh et, tincidunt arcu. Aenean porta faucibus nisl. Fusce ultrices nec purus eget consequat. Phasellus pharetra dignissim lacus id rhoncus.
						In malesuada et mi non mollis. </p>
					<a class="morebtn" href="#">ReadMore</a>
				</div>
			</div>
			<!----//fea-video---->
			<script>
				$(document).ready(function() {
					$('.popup-with-zoom-anim').magnificPopup({
						type: 'inline',
						fixedContentPos: false,
						fixedBgPos: true,
						overflowY: 'auto',
						closeBtnInside: true,
						preloader: false,
						midClick: true,
						removalDelay: 300,
						mainClass: 'my-mfp-zoom-in'
					});
				});
			</script>
		</div>
		<!-- /caption-popup -->
		<!---pop-up-box---->
		<link href="__PUBLIC__/home/css/popuo-box.css" rel="stylesheet" type="text/css" media="all" />
		<script src="__PUBLIC__/home/js/jquery.magnific-popup.js" type="text/javascript"></script>
		<script src="__PUBLIC__/home/js/owl.carousel.js"></script>
		<!---//pop-up-box---->
		<!--slide-->
		<!--address-->
		<div class="address">
			<div class="container">
			<img class="img-responsive " src="__PUBLIC__/home/images/ad.png" title="postname" />
			</div>
		</div>
		<!--address-->
		<!--articles-->
		<div class="articles">
			<div class="container">
				<div class="articles-top">
					<div class="col-md-9 articles-left">
						<h4>最新文章</h4>
						<foreach name="articleData" item="vo" >
							<div class="art" style="margin-top:10px;overflow:hidden;position:relative;">	
								<div class="col-md-3">
									<img class="img-responsive" src="{$vo.thumb}" title="postname" />	
								</div>
								<div class="col-md-9">
									<h4><a href="">{$vo.title}</a></h4>
									<p style="margin-top:5px;">{$vo.desc|substr=0,200}</p>
									<p style="font-size : 12px;position: absolute;top: 100px;">浏览量:100</p>	
								</div>	
							</div>
						</foreach>
						<div class="load">
						<a href="#" class="hvr-shutter-out-horizontal">加载更多...</a>
						</div>
					</div>
					<div class="col-md-3 articles-left" >
						<div class="recommend">
							
						</div>
						<div class="express">
							
						</div>
					</div>	
					<!--<div class="clearfix"></div>-->
					
				</div>
			</div>
		</div>
		<!--articles-->
		<link rel="stylesheet" href="__PUBLIC__/home/css/swipebox.css">
		<script src="__PUBLIC__/home/js/jquery.swipebox.min.js"></script>
		<script type="text/javascript">
			jQuery(function($) {
				$(".swipebox").swipebox();
			});
		</script>
		<!-- Portfolio Ends Here -->
		<script type="text/javascript" src="__PUBLIC__/home/js/jquery.mixitup.min.js"></script>
		<script type="text/javascript">
			$(function() {
				var filterList = {
					init: function() {
						// MixItUp plugin
						// http://mixitup.io
						$('#portfoliolist').mixitup({
							targetSelector: '.portfolio',
							filterSelector: '.filter',
							effects: ['fade'],
							easing: 'snap',
							// call the hover effect
							onMixEnd: filterList.hoverEffect()
						});
					},
					hoverEffect: function() {
						// Simple parallax effect
						$('#portfoliolist .portfolio').hover(
							function() {
								$(this).find('.label').stop().animate({
									bottom: 0
								}, 200, 'easeOutQuad');
								$(this).find('img').stop().animate({
									top: -30
								}, 500, 'easeOutQuad');
							},
							function() {
								$(this).find('.label').stop().animate({
									bottom: -40
								}, 200, 'easeInQuad');
								$(this).find('img').stop().animate({
									top: 0
								}, 300, 'easeOutQuad');
							}
						);
					}
				};
				// Run the show!
				filterList.init();
			});
		</script>
		
		<!--read-->
		<!--<div class="read">
			<div class="container">
				<div class="read-main">
					<div class="col-md-5 read-left">
						<h3>Site Map</h3>
						<div class="read-btm">
							<div class="col-md-4 rd-left">
								<ul>
									<li><a href="index.html">Home</a>
									</li>
									<li><a href="#">Archive</a>
									</li>
									<li><a href="#">Drsign Posts</a>
									</li>
									<li><a href="#">Latest News</a>
									</li>
									<li><a href="#">Footer Demo</a>
									</li>
									<li><a href="#">Just a link</a>
									</li>
									<li><a href="#">Links Demo</a>
									</li>
									<li><a href="#">Advertisement</a>
									</li>
								</ul>
							</div>
							<div class="col-md-4 rd-left">
								<ul>
									<li><a href="#">Privcey</a>
									</li>
									<li><a href="#">Design Articles</a>
									</li>
									<li><a href="#">Drsign Posts</a>
									</li>
									<li><a href="#">Latest News</a>
									</li>
									<li><a href="#">Footer Demo</a>
									</li>
									<li><a href="#">Just a link</a>
									</li>
									<li><a href="#">Links Demo</a>
									</li>
									<li><a href="#">Advertisement</a>
									</li>
								</ul>
							</div>
							<div class="col-md-4 rd-left">
								<ul>
									<li><a href="magazine.html">Magazine</a>
									</li>
									<li><a href="#">Drsign Posts</a>
									</li>
									<li><a href="#">Latest News</a>
									</li>
									<li><a href="#">Footer Demo</a>
									</li>
									<li><a href="#">Just a link</a>
									</li>
									<li><a href="#">Links Demo</a>
									</li>
									<li><a href="#">Advertisement</a>
									</li>
								</ul>
							</div>
							<div class="clearfix"></div>
						</div>
					</div>
					<div class="col-md-5 read-left">
						<h3>Dont Miss Read</h3>
						<div class="read-btm">
							<div class="read-one">
								<div class="col-md-3 read-bottom-left">
									<img src="__PUBLIC__/home/images/read-1.jpg" alt="" />
								</div>
								<div class="col-md-9 read-bottom-right">
									<h4>Captivating Spanish Villa in Port d鈥橝ndratx Boasting Exceptional Views</h4>
									<p>Posted on August 14, 2013</p>
								</div>
								<div class="clearfix"></div>
							</div>
							<div class="read-one">
								<div class="col-md-3 read-bottom-left">
									<img src="__PUBLIC__/home/images/read-1.jpg" alt="" />
								</div>
								<div class="col-md-9 read-bottom-right">
									<h4>Captivating Spanish Villa in Port d鈥橝ndratx Boasting Exceptional Views</h4>
									<p>Posted on August 14, 2013</p>
								</div>
								<div class="clearfix"></div>
							</div>
						</div>
					</div>
					<div class="col-md-2 read-left">
						<h3>Follow Us Here</h3>
						<div class="read-btm follow">
							<ul>
								<li><a href="#" class="twit">423.3k Followers</a>
								</li>
								<li><a href="#" class="fb">6.8m Likes</a>
								</li>
								<li><a href="#" class="d">423k Followers</a>
								</li>
								<li><a href="#" class="p">423k Followers</a>
								</li>
							</ul>
						</div>
					</div>
					<div class="clearfix"></div>
				</div>
			</div>
		</div>-->
		<!--read-->
		<!--footer-->
		<include file="Common/footer" />
		<!--footer-->
		<link rel="stylesheet" href="__PUBLIC__/home/css/my.css" />
		<script src="__PUBLIC__/home/js/my.js"></script>
		<script >
			var APP = "__APP__";
		</script>
	</body>

</html>